<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:10%;height: 85%;overflow-y: hidden">
    <template slot="footer">
      <a-button key="back" v-if="isReadOnly" @click="handleCancel">关闭</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" id="simpleEditModal">
        <a-row :md="24">
          <template v-for="(item, index) in columns" v-if="opType != 'add' || !item.primaryKey">
            <a-col :md="12" :sm="24">
                <form-editor :item="item" :dictValues="dictValues" :key="index" :formModel="model"></form-editor>
            </a-col>
          </template>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
  import pick from 'lodash.pick'
  import Vue from 'vue'
  import JSelectPosition from '@/components/jeecgbiz/JSelectPosition'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import { getAction } from '@/api/manage'
  import {agileTemplate, addUser,editUser,queryOrganizationTreeList,roleAllList} from '@/api/api'
  import { disabledAuthFilter } from "@/utils/authFilter"
  import { duplicateCheck } from '@/api/api'
  import FormEditor from './FormEditor'
  import {autoJumpNextInput} from "@/utils/util"
  import JImageUpload from '../../../components/jeecg/JImageUpload'
  import JDate from '@/components/jeecg/JDate'
  import { JModalMixin } from '@/mixins/JModalMixin'
  export default {
    name: "SimpleEditModal",
    mixins: [JModalMixin],
    components: {
      FormEditor,
      JImageUpload,
      JSelectPosition,
      JDate
    },
    props: {
      columns: {
        type: Array,
        required: false
      },
      primaryKey: {
        type: String,
        required: false,
        default: "id",
      },
      dictValues: {
        type: Object,
        required: false,
        default(){
          return {}
        }
      },
      agilePageCode: {
        type: String,
        required: true,
      }
    },
    computed:{
    },
    data () {
      return {
        title:"操作",
        visible: false,
        modalWidth:800,
        drawerWidth:700,
        isReadOnly: false,
        opType: 'add',
        disableSubmit:false,
        dateFormat:"YYYY-MM-DD",
        validatorRules:{
          loginName:{
            rules: [{
              required: true, message: '请输入登录名称!'
            }]
          },
          username:{
            rules: [{
              required: true, message: '请输入用户姓名!'
            }]
          },
          roleId:{
            rules: [{
              required: true, message: '请选择角色!'
            }]
          }
        },
        model: {
          companyId: 0
        },
        uploadLoading:false,
        confirmLoading: false,
        headers:{},
        form: this.$form.createForm(this)
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token}
    },
    methods: {      
      /*getDictValues(field){
        if(field.dataSourceType == 'DICT' || field.dataSourceType == 'ENUM' || field.dataSourceType == 'TABLE_COLUMN'){
          const ss = field.dataSourceTypeParam.split(".");
          if(ss.length <= 3){            
            return this.dictValues[ss[0]];
          }else{
            return this.dictValues[field.dataSourceTypeParam];
          }
        }
      },
      getDictValue(dict, text){
        if(!text){return;}
        text = text + "";
        const vs = this.dictValues[dict];
        if(vs){
          for(var v =0; v < vs.length; v++){
            if(vs[v].valueCode == text){
              return vs[v].valueName;
            }
          }
        }
      },
      calcScale(scale){
        var d = 1;
        if(scale > 0){
          for(var i=0;i<scale; i++){
            d = d/10;
          }
        }else if(scale < 0){
          scale = scale * 1;
          for(var i=0; i<scale; i++){
            d = d * 10;
          }
        }
        return d;
      },*/
      add () {
        this.edit();
      },
      edit (record, readOnly) {
        const that = this;
        this.opType = !record ? 'add' : 'edit'
        if(readOnly){
          this.isReadOnly = true;
        }else{
          this.isReadOnly = false;
        }
        this.form.resetFields();
        this.visible = true;
        this.model = Object.assign({}, record);
        this.$nextTick(() => {
          this.setFormItemValue(this.model, this.form, this.columns)
        });
      },
      close() {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
      },
      handleOk() {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let dto = {}
            dto.agilePageCode = that.agilePageCode
            dto.data = Object.assign(this.model, values);
            let obj;
            if(!this.model.id){
              dto.buttonType = 'add'
              obj=agileTemplate.add(dto);              
            }else{
              dto.buttonType = 'update'
              obj=agileTemplate.update(dto);
            }
            obj.then((res)=>{
              if(res.ok){
                that.$emit('ok');
              }else{
                that.$message.warning(res.msg);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })

          }
        })
      },
      handleCancel() {
        this.close()
      },      
      isEditable(column){
        const opType = this.opType;
        if(opType == 'add'){
          return column.insertable
        }else if(opType == 'edit'){
          return column.updateable
        }
        return false
      }
    }
  }
</script>

<style scoped>
.readOnly{border: none;box-shadow: none;background-color: #f0f0f0;}
.required lable{color: red;}
.ant-input-number{width: 100%;}
</style>